<template>
  <div class="app-container">
   
      <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>经销商优惠列表</span>
      <el-button class="btn-add" @click="handleAddPromotion()" size="mini">
        添加新优惠
      </el-button>
    </el-card>
    <el-table ref="productTable"
          :data="list"
          style="width: 100%;margin-bottom: 20px;"
          v-loading="listLoading"
          row-key="id"
         N border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="优惠信息" width="550" align="center">
          <template slot-scope="scope" >
            <!-- <p v-if="scope.row.type ==1">满{{scope.row.fullPrice}}减{{scope.row.reducePrice}}</p>
            <p v-else-if="scope.row.type ==2">{{scope.row.discount}}折</p>
            <p v-else>满{{scope.row.freeFreight}}免邮</p> -->
            <p v-if="scope.row.type ==1">满{{scope.row.fullPrice}}减{{scope.row.reducePrice}}</p>
            <p v-else-if="scope.row.type ==2">{{scope.row.discount}}折</p>
            <p v-else>满{{scope.row.freeFreight}}免邮</p>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="250" align="center">
          <template slot-scope="scope">{{scope.row.remark}}</template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditPromotion(scope.$index, scope.row)">编辑
              </el-button>
              <!-- <el-button
                size="mini"
                @click="handleUpdatePromotion(scope.$index, scope.row)">分配优惠
              </el-button> -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDeletePromotion(scope.$index, scope.row)">删除
              </el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 新增优惠的弹窗 -->
    <el-dialog title="新增优惠" :visible.sync="isNewPromotionOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
        <el-form :model="newForm" style="width:25rem;margin-left:1rem;" :rules="newFormRules" >
           <el-radio-group v-model="newForm.type">
            <el-radio :label="1">满减优惠</el-radio>
            <el-radio :label="2">折扣</el-radio>
            <el-radio :label="3">免邮费</el-radio>
          </el-radio-group>
          <div v-if="newForm.type == 1" class="promotion-type">
            满
            <el-form-item  prop="fullPrice" required  class="form-sort-item">
                <el-input v-model="newForm.fullPrice" placeholder="" style="width:4rem;"></el-input>
            </el-form-item>
            减
            <el-form-item  prop="reducePrice" required  class="form-sort-item">
                <el-input v-model="newForm.reducePrice" placeholder="" style="width:4rem;"></el-input>
            </el-form-item>
          </div>
          <div v-if="newForm.type == 2" class="promotion-type">
             <el-form-item label="折扣" prop="discount" required >
                <el-input v-model="newForm.discount" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
          </div>
          <div v-if="newForm.type == 3" class="promotion-type">
             <el-form-item label="免邮" prop="freeFreight" required >
                <el-input v-model="newForm.freeFreight" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="remark">
                <el-input v-model="newForm.remark" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="saveNewPromotion('newForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isNewPromotionOpen = false">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 编辑优惠的弹窗 -->
    <el-dialog title="编辑优惠" :visible.sync="isEditPromotionOpen" :close-on-click-modal="false" :show-close="true" class="adjustmentBox">
      <el-form :model="editForm" style="width:25rem;margin-left:1rem;" :rules="editFormRules" >
           <!-- <el-radio-group v-model="editForm.type">
            <el-radio :label="1">满减优惠</el-radio>
            <el-radio :label="2">折扣</el-radio>
            <el-radio :label="3">免邮费</el-radio>
          </el-radio-group> -->
          <div v-if="editForm.type == 1" class="promotion-type">
            满
            <el-form-item  prop="fullPrice" required  class="form-sort-item">
                <el-input v-model="editForm.fullPrice" placeholder="" style="width:4rem;"></el-input>
            </el-form-item>
            减
            <el-form-item  prop="reducePrice" required  class="form-sort-item">
                <el-input v-model="editForm.reducePrice" placeholder="" style="width:4rem;"></el-input>
            </el-form-item>
          </div>
          <div v-if="editForm.type == 2" class="promotion-type">
             <el-form-item label="折扣" prop="discount" required >
                <el-input v-model="editForm.discount" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
          </div>
          <div v-if="editForm.type == 3" class="promotion-type">
             <el-form-item label="免邮" prop="freeFreight" required >
                <el-input v-model="editForm.freeFreight" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="remark">
                <el-input v-model="editForm.remark" placeholder="" style="width:16.66rem;"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="savePromotionInfo('editForm')" style="color:#fff;background-color:#417FF6;">保存</el-button>
            <el-button @click="isEditPromotionOpen = false">关闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
    import {
    fetchPromotionList,
    updatePromotionInfo,
    newPromotionInfo,
    deletePromotion,
    fetchSalesDiscountList
    // updateDeleteStatus,
    // updateNewStatus,
    // updateRecommendStatus,
    // updatePublishStatus
  } from '@/api/salesman'
//   import {fetchList as fetchSkuStockList,update as updateSkuStockList} from '@/api/skuStock'
//   import {fetchList as fetchProductAttrList} from '@/api/productAttr'
//   import {fetchList as fetchBrandList} from '@/api/brand'
//   import {fetchListWithChildren} from '@/api/productCate'

  const defaultListQuery = {
    nickname: null,
    pageNum: 1,
    pageSize: 5,
  };
  export default {
    name: "PromotionList",
    data() {
      return {
          list:[],
          defaultProps: {
            children: 'children',
            label: 'label'
            },
          listQuery:Object.assign({}, defaultListQuery),
          newForm:{//新增优惠弹框里内容
            type:1,
            fullPrice:0,
            reducePrice:0,
            discount:0,
            freeFreight:0,
            remark:''
          },

          editForm: {//编辑优惠弹框里内容
            nickname:'',
            invitationCode:'',
            desc:'',
          },
          newFormRules:{
            nickname:[
                { required: true,  message: '优惠名不能为空', trigger: ['blur','change']}
             ],
            invitationCode:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
            //  sort:[
            //     { required: true,  message: '排序不能为空', trigger: ['blur','change']}
            //  ],
            //  icon:[
            //     { required: true,  message: '图标不能为空', trigger: ['blur','change']}
            //  ],
          },
          editFormRules:{
            nickname:[
                { required: true,  message: '优惠名不能为空', trigger: ['blur','change']}
             ],
             invitationCode:[
                { required: true,  message: '链接不能为空', trigger: ['blur','change']}
             ],
            //  sort:[
            //     { required: true,  message: '排序不能为空', trigger: ['blur','change']}
            //  ],
            //  icon:[
            //     { required: true,  message: '图标不能为空', trigger: ['blur','change']}
            //  ],
          },

          isNewPromotionOpen:false,//新增优惠弹窗
          isEditPromotionOpen:false,//编辑优惠弹窗
         
      }
    },
    created() {
      this.getList();
    },
    methods:{
      getList() {
        this.listLoading = true;
        let params = new URLSearchParams();
        params.append('type', 1);
        fetchSalesDiscountList().then(response => {
            if(response.code === 200){
               this.listLoading = false;
                let res = response.data;
                this.list = res.list;
                this.total = response.data.total;
                this.totalPage = response.data.totalPage;
                this.pageSize = response.data.pageSize;
            }
           
        });
      },
      searchQueryList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleEditPromotion(index,item){
        this.isEditPromotionOpen = true;
        this.editForm = JSON.parse(JSON.stringify(item));
          this.editForm.currentUId = item.id;
        //  this.editForm.nickname = item.nickname;
        //  this.editForm.invitationCode = item.invitationCode;
        //  this.editForm.desc = item.desc;
         console.log(this.editForm)
      },
      handleAddPromotion(){
          this.isNewPromotionOpen = true;
      },
      saveNewPromotion(){
          let self= this;
          console.log(self.newForm.type);
        newPromotionInfo(self.newForm).then(response=>{
            if(response.code == 200){
                self.$message({
                message: '新建成功',
                type: 'success',
                duration: 1000
            });
            self.isNewPromotionOpen=false;
            self.getList();
            }
        })
      },
      savePromotionInfo(){
          console.log(this.editForm);
        delete this.editForm.createTime;
        delete this.editForm.updateTime;
        this.editForm.fullPrice = this.editForm.fullPrice;
        this.editForm.freeFreight = this.editForm.freeFreight;
        this.editForm.reducePrice = this.editForm.reducePrice;
        // this.editForm.createTime = '';
        // this.editForm.updateTime = '';
        updatePromotionInfo(this.editForm.currentUId,this.editForm).then(response=>{
            this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
            });
            this.isEditPromotionOpen=false;
            this.getList();
        });
      },
      handleDeletePromotion(index,item){
          let self = this;
           self.$confirm('删除该优惠, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // let arrTemp= [];
                // arrTemp.push(item.id);
                // //objTemp.ids = arrTemp;
                // let params = new URLSearchParams();
                // params.append('id', arrTemp);
                let delId=item.id;
                deletePromotion(delId).then(response=>{
                    if(response.code === 200){
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        self.getList();
                    }
                });
            }).catch(() => {
                // self.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
      },
      
    }
  }
</script>
<style scoped>
.btn-add{
    font-size: 14px;
    padding: 10px;
    margin-top: -8px;
  color:#fff;
  background-color:#417FF6;
}
/* 弹出框的宽度 */
.adjustmentBox >>> .el-dialog{
  width: 28rem;
} 
.promotion-type{
  margin-top: 1rem;
}
.form-sort-item{
  display: inline-block;
}
</style>